<template>
  <div class="mine">
  	<div class="me">
  		
  	</div>
  	<h3>开始准备好好学习</h3>
  	<p>
	     好好学习，比什么都重要。选择你最喜欢的课程，分享你的经验，做前端达人。
	</p>
  	<button type="button" class="mui-btn mui-btn-success mui-btn-block" @click="logClick">登录</button>
   <button type="button" class="mui-btn mui-btn-danger mui-btn-block">注册</button>
  <p>
	     登录注册即代表你同意前端技术学习<用户协议>和<隐私政策>。
  </p>
  <h4>其他登录选项</h4>
  <Dialog :is-show="isShowLogDialog" @on-close="closeDialog('isShowLogDialog')">
      <log-form @has-log="onSuccessLog"></log-form>
  </Dialog>

 </div>
</template>

<script>
import Dialog from './dialog'	
import LogForm from './logform'
export default {
  name: '',
components: {
    Dialog,
    LogForm,
   // RegForm
  },
  data () {
    return {
      isShowAboutDialog: false,
      isShowLogDialog: false,
      isShowRegDialog: false,
      username: '',
    }
  },
  methods:{
  	logClick () {
      this.isShowLogDialog = true
    },
     closeDialog (attr) {
      this[attr] = false
    },
     onSuccessLog (data) {
      this.closeDialog ('isShowLogDialog')
      this.username = data.username
     // console.log(this.username)
      this.$router.push({name:'home'})
      this.$emit('haslog',data)
    },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2,h3,h4 {
	text-align: center;
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.me{
	height: 100px;
}
.mine{
	padding:5%;
}
p{
	text-align: center;
	margin: 20px 0;
}
</style>
